<template>
  <div id="data-view-project">
    <dv-loading v-if="loading">Loading...</dv-loading>
    <dv-full-screen-container v-else>
      <div class="main-header">
        <div
          class="mh-left"
          @click="routerUrl('datav-policy')"
        >
          <a>政策速递</a>
          <dv-decoration-8 style="width:200px;height:50px;" />
        </div>
        <div
          class="mh-middle"
          style="line-height:70px;"
        >
          <div class="title" @click="changeClassName()">项目介绍</div>
          <dv-decoration-5 style="width:300px;height:40px;margin:12px auto;" />
          <a href="javascript:;" :class="className" @click="routerUrl('index-index')">返回控制台</a>
        </div>
        <div
          class="mh-right"
          @click="routerUrl('datav-index')"
        >
          <a>数据一览</a>
          <dv-decoration-8
            :reverse="true"
            style="width:200px;height:50px;"
          />
        </div>
      </div>
      <dv-border-box-1 class="main-container-datav">
        <project-left
          class="left-container"
          style="max-height:800px;"
        />
        <project-right class="right-container" />
      </dv-border-box-1>
    </dv-full-screen-container>
  </div>
</template>

<script>
import ProjectLeft from './components/project-left'
import ProjectRight from './components/project-right'
export default {
  name: 'DataView',
  components: {
    ProjectLeft,
    ProjectRight
  },
  data() {
    return {
      loading: true,
      isFullscreen: false,
      className: 'hid'
    }
  },
  created() {
    setTimeout(() => {
      this.loading = false
    }, 2000)
  },
  methods: {
    routerUrl(name) {
      this.$router.push({ name: name })
    },
    changeClassName() {
      this.className = this.className ? '' : 'hid'
    }
  }
}
</script>

<style lang="scss">
#data-view-project {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background: url(https://api.zesi.com.cn/storage/datav/bg.png) no-repeat 0 0 #102b70;
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .main-header {
    height: 91px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    .mh-left,
    .mh-right {
      display: flex;
      flex-direction: column;
      cursor: pointer;
      a {
        font-size: 18px;
        color: rgb(145, 208, 233);
        text-decoration: none;
        margin: 48px 0 -12px 0;
      }
    }
    .mh-left {
      text-align: right;
      padding-left: 32px;
      a {
        padding-right: 16px;
      }
    }
    .mh-right {
      text-align: left;
      padding-right: 32px;
      a {
        padding-left: 16px;
      }
    }

    .mh-middle {
      font-size: 30px;
      width: 1110px;
      height: 91px;
      line-height: 80px;
      background: url(https://api.zesi.com.cn/storage/datav/title_container.png) no-repeat center center;
      background-size: 60%;
      margin: 0 auto;
      text-align: center;
      a{
        position:relative;
        display:inline-block;
        z-index:9999;
        font-size:16px;
        text-decoration: underline;
        color:#eee;
        margin-top:-24px;
        &.hid{
          display:none;
        }
      }
    }
  }

  .main-container-datav {
    height: calc(100% - 80px);
    padding-top: 60px;
    .border-box-content {
      padding: 20px 70px;
      box-sizing: border-box;
      display: flex;
    }
  }

  .left-container {
    width: 50%;
    padding: 10px;
    box-sizing: border-box;
    .border-box-content {
      flex-direction: column;
    }
  }

  .right-container {
    width: 50%;
    box-sizing: border-box;
  }
}
</style>
